<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">总览控件（鹰眼、小地图） OverviewMap</h1>
      </el-affix>
      <div id="map" class="map-x" ref="mapBox"></div>
      <dl>
        <dt>总览控件</dt>
        <dd>control.OverviewMap(): 创建一个新控件，其中的地图充当另一个已定义地图的概览图。</dd>
      </dl>
      <div class="codestyle"><Code /></div>
    </div>
  </el-scrollbar>
</template>
<script>
import { toRefs, reactive, ref, onMounted } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ' // 引入XYZ地图格式
import * as control from 'ol/control'
import * as olInteraction from 'ol/interaction'
export default {
  setup () {
    const state = reactive({
      map: ref(null),
      mapBox: ref(null)
    })

    const init = () => {
      const overviewMapControl = new control.OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        collapseLabel: '\u00BB',
        label: '\u00AB',
        collapsed: false
      })

      state.map = new Map({
        target: state.mapBox,
        // 添加控件
        controls: control.defaults().extend([
          overviewMapControl
        ]),
        interactions: olInteraction.defaults().extend([
          new olInteraction.DragRotateAndZoom()
        ]),
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        view: new View({
          // 地图视图
          center: [116.41400, 39.91500], // 北京坐标
          zoom: 7 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

    onMounted(() => {
      init()
    })

    return {
      init,
      ...toRefs(state)
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
:deep(.ol-custom-overviewmap),
  :deep(.ol-custom-overviewmap) .ol-uncollapsible {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
  }

  :deep(.ol-custom-overviewmap:not(.ol-collapsed)) {
    border: 1px solid black;
  }

  :deep(.ol-custom-overviewmap) .ol-overviewmap-map {
    border: none;
    width: 300px;
  }

  :deep(.ol-custom-overviewmap) .ol-overviewmap-box {
    border: 2px solid red;
    width: 40px!important;
    height: 40px!important;
  }

  :deep(.ol-custom-overviewmap:not(.ol-collapsed)) button {
    bottom: auto;
    left: auto;
    right: 1px;
    top: 1px;
  }

  :deep(.ol-rotate) {
    top: 170px;
    right: 0;
  }
</style>
